<template>
  <div>
    <table cellspacing="0" class="table">
      <thead>
        <tr>
          <th width="50"><Checkbox v-model="selectAll" @on-change="onSelectAll"></Checkbox></th>
          <th width="20"></th>
          <th v-for="item in listData" :key="item.id" :width="item.width">{{item.title}}</th>
        </tr>
      </thead>
      <tbody v-for="item in list" :key="item.id">
        <tr>
          <td><Checkbox v-model="item.checked" @on-change="onJoinSaleCheck(item)"></Checkbox></td>
          <td>
            <Icon type="ios-arrow-down" size="20" v-if="item.showChildren" @click="onShowChild(item)"></Icon>
            <Icon type="ios-arrow-right" size="20" v-if="item.productSkuList && item.productSkuList.length && !item.showChildren" @click="onShowChild(item)"></Icon>
          </td>
          <td>{{item.id}}</td>
          <td>-</td>
          <td style="width:100px"><div class="e1 flex-center"><img :src="item.productPrimaryImg" alt="">{{item.title}}</div></td>
          <td>{{item.brandId}}</td>
          <td>{{item.isShelf | status}}</td>
          <td>{{item.brandId}}</td>
          <td><Input v-model="item.returnPrice"/></td>
          <td><Input v-model="item.quantity"/></td>
          <td>
            <Button  v-show="!item.checked" type="primary" size="small" @click="onJoinSale(item)">加入促销</Button>
            <Button v-show="item.checked" size="small" @click="onJoinSale(item)">撤出促销</Button>
          </td>
        </tr>
        <template v-if="item.productSkuList && item.productSkuList.length">
          <tr v-for="child in item.productSkuList" :key="child.id" v-show="item.showChildren">
            <td></td>
            <td></td>
            <td><Checkbox v-model="child.checked" @on-change="onJoinSaleCheck(child,item)"></Checkbox></td>
            <td>{{child.id}}</td>
            <td style="width:100px"><div class="e1 flex-center"><img :src="item.productPrimaryImg" alt="">{{item.title}}</div></td>
            <td>{{child.salePrice}}</td>
            <td>{{item.isShelf  | status}}</td>
            <td>{{child.stock}}</td>
            <td><Input v-model="child.returnPrice"/></td>
            <td><Input v-model="child.quantity"/></td>
            <td>
              <Button v-show="!child.checked" type="primary" size="small" @click="onJoinSale(child, item)">加入促销</Button>
              <Button v-show="child.checked" size="small" @click="onJoinSale(child, item)">撤出促销</Button>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
    <div class="pager">
      <Page 
        :total="totalItem" 
        :current="currentPage"
        :page-size="pageSize"
        @on-change="onPageChange"
        @on-page-size-change="onPageSizeChange"
        show-sizer 
        placement="top">
      </Page>
    </div> 
    <Loader :status="status" @refresh="getData"></Loader>
  </div>
</template>
<script>
export default {
  props: {
    listData: '',
    list:''
  },
  data() {
    return {
      selectAll: false,
      status: 'pass',
      totalItem: 1,
      pageSize: window.$pageSize,
      currentPage: 1,

    }
  },
  methods: {
    onSelectAll() {
      // 全选 、全不选
      this.$emit('onChangeSelectAll',this.selectAll);
    },
    onJoinSale (child, item) {
      this.$emit('onJoinSale',child, item);
    },
    onShowChild(item) {
      item.showChildren = !item.showChildren;
    },
    onJoinSaleCheck (child,item) {
      this.$emit('onJoinSaleCheck', child,item)
    },
    getData() {},
    onPageChange() {},
    onPageSizeChange() {}
  },
  filters: {
    status (val) {
      if (val) {
        return '上架'
      }else {
        return '下架'
      }
    }
  },
}
</script>

